<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="font/font3/headlines/iconfont.css">
    <link rel="stylesheet" href="css/childrenBook.css">
    <link rel="stylesheet" href="css/mui-3.css">
    <link rel="icon" type="image/x-icon" href="https://img61.ddimg.cn/upload_img/00555/touch/touch-icon-ipad.png">
    <title>童书馆</title>
</head>
<body>
    <div class="childrentopPic">
      <img src="image/img3/childrentopPic.png" alt="">
    </div>
    <div class="topNav">
        <i class="iconfont icon-right"></i>
        <h1>童书馆</h1>
        <p></p>
    </div>
    <div class="searchBox">
        <input type="text">
        <p>童书</p>
    </div>
    <div class="swiper mySwiper childrenOne">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img class="broadPic1" src="image/img3/childrenBook1-1.jpg" />
          </div>
          <div class="swiper-slide">
            <img class="broadPic1" src="image/img3/children1-2.jpg" />
          </div>
          <div class="swiper-slide">
            <img class="broadPic1" src="image/img3/children1-3.jpg" />
          </div>
          <div class="swiper-slide">
            <img class="broadPic1" src="image/img3/children1-4.jpg" />
          </div>
          <div class="swiper-slide">
            <img class="broadPic1" src="image/img3/children1-5.jpg" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="childrenLists">
        <img src="image/img3/children2-1.jpg" alt="">
        <img src="image/img3/children2-2.jpg" alt="">
        <img src="image/img3/children2-3.jpg" alt="">
        <img src="image/img3/children2-4.jpg" alt="">
        <img src="image/img3/children2-5.jpg" alt="">
    </div>
    <div class="childrenTitle1">
        <div class="childrenTitle1Text">
            <p>爆秒叠加满减，到手2折起！</p>
            <p>00</p>
            <p>:</p>
            <p>00</p>
            <p>:</p>
            <p>00</p>
            <div class="childrenTitle1More">
                更多
                <p></p>
            </div>
        </div>
    </div>
    <div class="swiper mySwiper childrenTwo">
        <div class="swiper-wrapper ">
          <div class="swiper-slide childrenTwoText">
            <div class="childrenTwoLists1">
              <img src="image/img3/children3-1.jpg" alt="">
              <p>少年读史 小史记（全五册）www</p>
              <p>¥184.90</p>
              <del>¥268.00</del>
            </div>
          </div>
          <div class="swiper-slide childrenTwoText">
            <div class="childrenTwoLists1">
              <img src="image/img3/children3-2.jpg" alt="">
                <p>外婆www</p>
                <p>¥8.40</p>
                <del>¥25.00</del>
            </div>
          </div>
          <div class="swiper-slide childrenTwoText">
            <div class="childrenTwoLists1">
              <img src="image/img3/children3-3.jpg" alt="">
              <p>中国国家博物馆 孩子一定要去的博物馆 图说天下精装版www</p>
              <p>¥11.20</p>
              <del>¥11.20</del>
            </div>
            
          </div>
          <div class="swiper-slide childrenTwoText">
            <div class="childrenTwoLists1">
              <img src="image/img3/children3-4.jpg" alt="">
              <p>亲爱的笨笨猪系列全套6册 杨红樱童话注音本系列有声伴读版 装满歌声的罐子你好小灰狼鸡外婆的礼物春天的野餐会乖乖熊的生日会会跳舞的尾巴www</p>
              <p>¥37.80</p>
              <del>¥108.00</del>
            </div>
            
          </div>
          <div class="swiper-slide childrenTwoText">
            <div class="childrenTwoLists1">
              <img src="image/img3/children3-5.jpg" alt="">
              <p>寻虫记 献给孩子们的昆虫探秘科普绘本 图说天下精装版www</p>
              <p>¥12.50</p>
              <del>¥45.00</del>
            </div>
            
          </div>
          <div class="swiper-slide childrenTwoText">
            <div class="childrenTwoLists1">
              <img src="image/img3/children3-6.jpg" alt="">
              <p>你好！数学（超值礼品盒装，共30册）www</p>
              <p>¥74.70</p>
              <del>¥240.00</del>
            </div>
            
          </div>
          <div class="swiper-slide childrenTwoText">
            <div class="childrenTwoLists1">
              <img src="image/img3/children3-7.jpg" alt="">
              <p>环球探险记 科考大冒险少儿科普套装7册 赠卡通贴纸3张www</p>
              <p>¥34.50</p>
              <del>¥172.20</del>
            </div>
            
          </div>
          <div class="swiper-slide childrenTwoText">
            <div class="childrenTwoLists1">
              <img src="image/img3/children3-8.jpg" alt="">
            <p>阳光姐姐小书房（插画版）：我的同桌是班长www</p>
            <p>¥8.40</p>
            <del>¥25.00</del>
            </div>
            
          </div>
        </div>
    </div>
    <ul class="childrenThreeLists">
      <li>图画书</li>
      <li>爆品秒杀</li>
      <li>科普百科</li>
      <li>9月新书<i class="hot1"></i></li>
      <li>儿童文学<i class="hot1"></i></li>
    </ul>
    <div class="childrenBox1">
      <img src="image/img3/childrenBox1-1.jpg" alt="">
    </div>


    <div class="swiper mySwiper childrenThree">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="broadPic1" src="image/img3/childrenBook1-1.jpg" />
        </div>
        <div class="swiper-slide">
          <img class="broadPic1" src="image/img3/children1-2.jpg" />
        </div>
        <div class="swiper-slide">
          <img class="broadPic1" src="image/img3/children1-3.jpg" />
        </div>
        <div class="swiper-slide">
          <img class="broadPic1" src="image/img3/children1-4.jpg" />
        </div>
        <div class="swiper-slide">
          <img class="broadPic1" src="image/img3/children1-5.jpg" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="childrenThreeLists1">
      <ul>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenro1-1-1.jpg" alt="">
          <p>108只小海龟（全5册，绘本妈妈海桐力荐！以小海龟团体生活为主题的社交启蒙绘本，让儿童融入团体生活，启发儿童心智，激发儿童的创造力和意志力，传达爱和友谊，3-6岁儿童适读~附亲子游戏导读手册）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>140</span><span></span>
            <span>限时抢</span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenro1-1-2.jpg" alt="">
          <p>穿过历史线，吃透小古文（亲签版 全5册 珍藏版大全集）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>192</span><span></span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenro1-1-3.jpg" alt="">
          <p>心灵教科书绘本系列：猫的深夜澡堂+玉米粒姐姐的美发店+牛蒡医生的诊所+猫头鹰先生的图书馆（精装4册·5周年礼盒装；爆笑温馨治愈，缓解孩子洗澡、理发、就医压力，回归本真培养创意；丁虹绘本馆出品，海桐妈妈推荐</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>239.20</span><span>.20</span>
            <span>限时抢</span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenro1-1-4.jpg" alt="">
          <p>伟大的中国奇迹：给孩子的古建筑解剖书（全8册）（当当独家定制精品礼盒，赠送中国奇迹打卡手帐、中国奇迹涂色书、圆明园官方授权限量明信片）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>399</span><span></span>
            <span>限时抢</span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenro1-1-5.jpg" alt="">
          <p>别听这本书胡说（全2册）（苏斯博士奖金奖作品，美国图书馆协会推荐，打破绘本固有的图文关系，跟随主角挑战这本书，培养孩子的创造性思维）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>79.80</span>
            <span>.80</span>
            <span>限时抢</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="childrenThreeLists1">
      <ul>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenro1-2-1.jpg" alt="">
          <p>吴姥姥不刷题.科学真好玩（第一辑，全3册，漫画源自生活中常见场景，涵盖“力学、光学和电磁学”等多个物理领域知识，跟着吴姥姥在轻松愉快的阅读中培养孩子的科学素养，脱离题海，不刷题也能学好知识）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>198</span><span></span>
            <span>限时抢</span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenro1-2-2.jpg" alt="">
          <p>吴姥姥不刷题.科学真好玩（第一辑，全3册，漫画源自生活中常见场景，涵盖“力学、光学和电磁学”等多个物理领域知识，跟着吴姥姥在轻松愉快的阅读中培养孩子的科学素养，脱离题海，不刷题也能学好知识）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>254</span><span></span>
            <span>限时抢</span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenro1-2-3.jpg" alt="">
          <p>了不起的越海神器（全5册，一套书集齐“联合利剑—2024A”同款装备，踹门神器歼-20、炸弹卡车歼-16、登陆猛将071、中华神盾052D、东风快递DF-15B、量大管饱191火箭炮）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>96</span><span></span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenro1-2-4.jpg" alt="">
          <p>不白吃学科启蒙系列（套装3册，赠精美书签和不白吃定制防水姓名贴。含《生物太好玩》《化学太好玩》《物理太好玩》）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>79</span><span></span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenro1-2-5.jpg" alt="">
          <p>神奇的古动物馆（全5册，中国古动物馆科普团队带你穿越时空，寻找101种远古生物！全5册，随书赠送3张贴纸和5张“神兽卡”）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>399</span>
            <span></span>
            <span>限时抢</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="childrenBox1">
      <img src="image/img3/childrenBox2-2.jpg" alt="">
    </div>
    <div class="swiper mySwiper childrenThree">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="broadPic1" src="image/img3/childrenrote2-1.jpg" />
        </div>
        <div class="swiper-slide">
          <img class="broadPic1" src="image/img3/childrenrote2-2.jpg" />
        </div>
        <div class="swiper-slide">
          <img class="broadPic1" src="image/img3/childrenrote2-3.jpg" />
        </div>
        <div class="swiper-slide">
          <img class="broadPic1" src="image/img3/childrenrote2-4.jpg" />
        </div>
        <div class="swiper-slide">
          <img class="broadPic1" src="image/img3/childrenrote2-5.jpg" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="childrenThreeLists1">
      <ul>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenrotext2-1.jpg" alt="">
          <p>爆笑西游记（套装全6册，像追动画片一样过瘾的300篇爆笑漫画，能让孩子不但读得完、 读得懂更重要的是能够记得住，轻松成为西游小专家！赠送奉旨取经飞行棋、《西游记》百问百答小册子）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>175</span><span></span>
            <span></span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenrotext2-2.jpg" alt="">
          <p>大闹物理天宫（全6册）（李永乐盛赞推荐！大物理学家李淼写给孩子的物理学漫画！点燃学习兴趣，助力孩子完成物理启蒙！）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>199</span><span></span>
            <span>限时抢</span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenrotext2-3.jpg" alt="">
          <p>猫咪大侦探第二辑（全4册）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>120</span><span></span>
            <span>每满100-50</span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenrotext2-4.jpg" alt="">
          <p>不可思议的山海经 （全2册  东方神话的根基，山海世界里的故事！这里每座山都有异兽，每片海都有传说。一套书带你跨越时空身临山海，探索古代神秘文化，真正读懂《山海经》！</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>149</span><span></span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenrotext2-5.jpg" alt="">
          <p>写给孩子的大语文经典百科 中华传统文化千问千答 难字注音版（套装 共10册）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>252</span>
            <span></span>
            <span>每满100-50</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="childrenThreeLists1">
      <ul>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenrotext2-1-1.jpg" alt="">
          <p>特种兵学校漫画诗词（套装5册）当当独家首发。“特种兵学校”系列作者八路最新力作。小学1—6年级语文教材古诗词120首全收录。</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>175</span><span></span>
            <span>限时抢</span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenrotext2-1-2.jpg" alt="">
          <p>万里江山的中国力量（8册，唯美大气的手绘插画带领孩子“亲临”超级工程现场，领略中国在文化、经济、水利、交通、城市、生态等领域所取得的辉煌成就，激发孩子对世界的好奇心和探索欲，铸就科学梦想）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>216</span><span></span>
            <span>限时抢</span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenrotext2-1-3.jpg" alt="">
          <p>中国寓言里的思辨课（寓言来了！全4册。在具体历史背景中真正读懂寓言故事，用中国寓言开启思辨性阅读和表达。7-14岁适读。歪歪兔童书馆出品）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>168</span><span></span>
            <span>限时抢</span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenrotext2-1-4.jpg" alt="">
          <p>《熊熊面包店》坚持不放弃、高情商培养，孩子的心头好作者出新书了！</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>135</span><span></span>
            <span>限时抢</span>
          </p>
        </li>
        <li class="childrenThreeLists1Text">
          <img src="image/img3/childrenrotext2-1-5.jpg" alt="">
          <p>向海洋挺进·海军科普绘本（全3册）</p>
          <p class="childrenThreeLists1Text1">
            <span>￥</span><span>147</span>
            <span></span>
            <span>限时抢</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="childrenfid">
      <img src="image/img3/childrenfid.jpg" alt="">
    </div>
    <div class="childrenbottomNav">
      <img src="image/img3/childrenbottomNav1-1.jpg" alt="">
      <img src="image/img3/childrenbottomNav1-2.jpg" alt="">
      <img src="image/img3/childrenbottomNav1-3.jpg" alt="">
      <img src="image/img3/childrenbottomNav1-4.jpg" alt="">
      <img src="image/img3/childrenbottomNav1-5.jpg" alt="">
    </div>
    <div class="rankingsLists">
      <ul class="rankingsList">
        <li class="">童书分类</li>
        <li>新书榜</li>
        <li>畅销榜</li>
        <li>年龄段榜</li>
        <li>童书飙升榜</li>
        <li>五星童书榜</li>
      </ul>
    </div>
    <div class="detailedlists">
      <ul class="detailedlist">
        <li>全部</li>
        
      </ul>
      <div class="detailedlisticon"> 
        <i onclick="childrenMore()" class="rote180"></i>
      </div>
    </div>
    <div class="childrenmoreAdd">
      <img src="image/img3/childrenmoreM1-1.jpg" alt="">
      <div class="childrenmoreAdd-text">
        <p>人一生要去的100个地方 少年游学地理百科</p>
        <p>日知图书 编著　北方妇女儿童出版社</p>
        <p class="childrenmoreAdd-text-price"><span>￥</span><span>9.90</span><del>34.00</del></p>
        <p>100.0%好评(198705人)</p>
      </div>
    </div>
    <div class="childrenmoreAdd">
      <img src="image/img3/childrenmoreM1-2.jpg" alt="">
      <div class="childrenmoreAdd-text">
        <p>大中华寻宝系列31 吉林寻宝记</p>
        <p>京鼎动漫　二十一世纪出版社</p>
        <p class="childrenmoreAdd-text-price"><span>￥</span><span>16.90</span><del>19.00</del></p>
        <p>100.0%好评(23人)</p>
      </div>
    </div>

    <div class="childrenbottomMore">
      <p>查看更多</p>
    </div>
    <div class="small">
      <img src="image/img3/icon_smile.png" alt="">
      <p>到底了，再拉裤子都掉啦</p>
    </div>
    <div style="height: 2.6667rem;"></div>


    
    
</body>
<script src="js/reset3-1.js"></script>
<script src="js/reset-3.js"></script>
<script>
   new Swiper(".childrenOne", {
      slidesPerView: 1,
      spaceBetween: 0,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      }
    })
   new Swiper(".childrenTwo", {
      slidesPerView: 3.5,
      spaceBetween: 0,
    });


    new Swiper(".childrenThree", {
      slidesPerView: 1,
      spaceBetween: 0,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      }
    })

    var detailedlist=document.querySelector('.detailedlist')
    var detailedlists=document.querySelector('.detailedlists')
    fetch('http://touch.m.dangdang.com/h5ajaxZ.php?action=list_category&user_client=touch&cid=01.41.00.00.00.00&img_size=h&page=1&page_size=100&client_version=1.0&app_id=touch&h5_server=1&udid=d6b18d2e89b888e30729d2bc58ad488c&permanent_id=20240911092633412119758971797301929').then(res=> res.json()).then(res1=> {
        console.log(res1)
      for(i=0; i<res1.categories.length; i++){
      
      detailedlist.innerHTML+=`
      <li>
        ${res1.categories[i].Name}
      </li>
      `
      }
    })
    var rote180=document.querySelector('.rote180')
    childrenMore=function(){
      console.log(111)
      rote180.classList.toggle('rotate1')
      detailedlists.classList.toggle('moreMore')
    }
    

</script>
</html>